<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>前端面试题的收集和总结(React篇) | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="面试合集," />
  

  
  <meta name="description" content="React的篇章">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2020-10-29
    </span>
    
      <span>
        | <a href="/blog/categories/%E9%9D%A2%E8%AF%95%E5%90%88%E9%9B%86/"><i class="fa fa-bookmark"></i>面试合集</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2020-10-29 15:25 
    </span>
  </div>
  <h1 class="passage-title">
    前端面试题的收集和总结(React篇)
  </h1>
  
  <article class="passage-article">
    <h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><h3 id="讲一下你对React的理解？"><a href="#讲一下你对React的理解？" class="headerlink" title="讲一下你对React的理解？"></a>讲一下你对React的理解？</h3><p>react是facebook在2011年开发的的javascript框架，在2015年进行的开源，有着浓厚的社区文化；react整体是函数式的思想，把组件设计成纯函数，状态和逻辑通过参数传入，所以在react中，是单向数据流；react通过js来操控一切，设计了jsx，通过jsx来生成html，css；react更喜欢规范化用户，让用户，社区去做更多，</p>
<h3 id="讲一下你对JSX的理解和认识？"><a href="#讲一下你对JSX的理解和认识？" class="headerlink" title="讲一下你对JSX的理解和认识？"></a>讲一下你对JSX的理解和认识？</h3><p>JSX是JavaScript的一种语法扩展，运用于React架构中，类似一种模板语言，但是它拥有JavaScript的全部能力。由于浏览器目前不支持jsx，JSx需要通过babel进行转换，转换成javascript</p>
<h3 id="类组件和函数组件有什么区别？"><a href="#类组件和函数组件有什么区别？" class="headerlink" title="类组件和函数组件有什么区别？"></a>类组件和函数组件有什么区别？</h3><p>一个是通过ES6的class来定义组件，一个是通过函数来定义组件；类组件允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态<br>而函数组件则是一个存函数，通过return返回需要渲染的部分，当然随着Hooks的出现，函数组件也可以使用state和更多的类似生命周期的react特性</p>
<h3 id="state-和-props有什么区别？"><a href="#state-和-props有什么区别？" class="headerlink" title="state 和 props有什么区别？"></a>state 和 props有什么区别？</h3><p>State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生改变，但多数时候是作为用户事件行为的结果。<br>Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)</p>
<h3 id="展示组件和容器组件的区别？"><a href="#展示组件和容器组件的区别？" class="headerlink" title="展示组件和容器组件的区别？"></a>展示组件和容器组件的区别？</h3><ul>
<li>展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。</li>
<li>容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。</li>
</ul>
<h3 id="React-中-keys的作用是什么"><a href="#React-中-keys的作用是什么" class="headerlink" title="React 中 keys的作用是什么?"></a>React 中 keys的作用是什么?</h3><p>Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识,在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系</p>
<h3 id="调用-super-props-的目的是什么"><a href="#调用-super-props-的目的是什么" class="headerlink" title="调用 super(props) 的目的是什么?"></a>调用 super(props) 的目的是什么?</h3><p>在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props</p>
<h3 id="React-中-refs-的作用是什么？"><a href="#React-中-refs-的作用是什么？" class="headerlink" title="React 中 refs 的作用是什么？"></a>React 中 refs 的作用是什么？</h3><p>Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回</p>
<h3 id="讲一下-React-的生命周期？"><a href="#讲一下-React-的生命周期？" class="headerlink" title="讲一下 React 的生命周期？"></a>讲一下 React 的生命周期？</h3><p>constructor getDerviedStateFromProps render componentDidMount shouleComponentUpdate getSnapshotBeforeUpdate componentDidUpdate componentWillUnmount</p>
<p>在react16版本中，常用的生命周期有 constructor() 初始化的时候调用；render() 初始化和更新的时候都会调用；componentDidMount() 组件挂载之后立即调用；componentDidUpdate() 更新后立即调用；componentWillUnmount() 组件卸载后立即调用；</p>
<p>不常用的生命周期有 render之前初始化更新都用static getDerviedStateFromProps() shouldComponentUpdate() getSnapshotBeforeUpdate() static getDerviedStateFromError() componentDidCatch()</p>
<h3 id="你一般在哪里执行网络请求？"><a href="#你一般在哪里执行网络请求？" class="headerlink" title="你一般在哪里执行网络请求？"></a>你一般在哪里执行网络请求？</h3><p>class组件中，应该在 componentDidMount 生命周期执行数据请求，因为在此生命周期，dom已经挂载完毕，可以保证setState() 在数据异步处理后可以保证视图的正常加载，而函数组件则在useEffect 进行数据请求</p>
<h3 id="讲讲你对-Hooks-的理解？"><a href="#讲讲你对-Hooks-的理解？" class="headerlink" title="讲讲你对 Hooks 的理解？"></a>讲讲你对 Hooks 的理解？</h3><p>Hooks是React16.8新增的特性，它可以让你在不编写class组件的情况下使用state和react的其他特性；</p>
<h4 id="useState"><a href="#useState" class="headerlink" title="useState"></a>useState</h4><p>Hooks中有 useState() 它返回一个state和更新state的函数，可以用于函数组件的state管理。 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">useState(name,setName)=useState(&#x27;初始状态&#x27;)</span><br></pre></td></tr></table></figure>

<h4 id="useEffect"><a href="#useEffect" class="headerlink" title="useEffect"></a>useEffect</h4><p>useEffect() 则接收一个包含命令式，且可能有副作用的函数，默认情况下，useEffect会在渲染结束后执行。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">useEffect(()=&gt;&#123;</span><br><span class="line">  ......</span><br><span class="line">  return(()=&gt;&#123;&#125;) //return一个函数，可以在组件卸载后执行函数</span><br><span class="line">&#125;,[porps.name])  //只有在props.name改变后，才会执行，如果是一个空函数，则只执行一次</span><br></pre></td></tr></table></figure>
<h4 id="useContext"><a href="#useContext" class="headerlink" title="useContext"></a>useContext</h4><p>useContext() 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值,一般是对它所包裹组件提供全局共享数据</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">const them=&#123;height:&#123;h:200&#125;&#125;</span><br><span class="line"></span><br><span class="line">const useCon=React.createContext(them.height)</span><br><span class="line"></span><br><span class="line">function App()&#123;</span><br><span class="line">  const thene=useContext(useCon) // 接受context对象，返回当前值</span><br><span class="line">  return(</span><br><span class="line">    &lt;p style=&#123;&#123;height:thene.h + &#x27;px&#x27;&#125;&#125;&gt;321&lt;/p&gt; </span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="额外的Hooks"><a href="#额外的Hooks" class="headerlink" title="额外的Hooks"></a>额外的Hooks</h4><p>还有一些额外的hooks 比如：useRef()作为ref在函数组件中的调用 useReducer() 作为useState的替代方案；useMemo()在组件渲染期间调用，不可以执行dom操作 useCallback()作为useMemo的语法糖，useDubugValue()可用于react开发工具中显示自定义Hook；useLayoutEffect() 作为effect的补充，在所有dom改变之后调用 useImperativeHandle()</p>
<h3 id="你对HOC-高阶组件-的理解？"><a href="#你对HOC-高阶组件-的理解？" class="headerlink" title="你对HOC(高阶组件)的理解？"></a>你对HOC(高阶组件)的理解？</h3><p><strong>高阶组件是一个以组件为参数并返回一个新组件的函数</strong>。是React用于复用组件逻辑的一种方式，是基于React的组合特性形成的一种设计模式；最常用的的HOC场景有：属性代理：主要用于修改props，抽象state和调用refs等等，反向继承：通过return 参数组件的super.render，被动继承参数组件，可以调用参数组件的state，props生命周期等</p>
<h3 id="讲一下-React-diff-的原理"><a href="#讲一下-React-diff-的原理" class="headerlink" title="讲一下 React diff 的原理"></a>讲一下 React diff 的原理</h3><p>把树形结构按照层级分解，只比较同级元素。<br>给列表结构的每个单元添加唯一的 key 属性，方便比较。<br>React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）<br>合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.<br>选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。</p>
<h3 id="讲一下你对-Redux-的理解？"><a href="#讲一下你对-Redux-的理解？" class="headerlink" title="讲一下你对 Redux 的理解？"></a>讲一下你对 Redux 的理解？</h3><p>Redux 是javascript 的状态容器，提供可预测的状态管理。它除了可以和react进行组合之外还可以和其他开发框架进行结合。 Redux有三大原则，1：单一数据源，redux把整个应用的state存储在一个对象树中，并且整对象树存储在一个store中。2：state是只读的，唯一改变state的方法就是触发action，通过dispatch action触发reducer进行修改。3：使用纯函数进行state修改，reducer是一个存函数，他接受之前的state和action并返回新的state</p>
<h3 id="Redux的属性有哪些"><a href="#Redux的属性有哪些" class="headerlink" title="Redux的属性有哪些"></a>Redux的属性有哪些</h3><p>action reducer store<br>action是把数据从应用传递到store的有效载荷，reducer则指定了应用状态变化应该如何响应action并发送到store。store则是把他们联系在一起的对象；store的职责有：提供<code>getState</code>获取state；提供<code>dispatch</code>更新state；提供<code>subscribe()</code>注册监听器；通过sunscribe 返回函数取消监听器</p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#React"><span class="toc-text">React</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%AF%B9React%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">讲一下你对React的理解？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%AF%B9JSX%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E8%AE%A4%E8%AF%86%EF%BC%9F"><span class="toc-text">讲一下你对JSX的理解和认识？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%92%8C%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">类组件和函数组件有什么区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#state-%E5%92%8C-props%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">state 和 props有什么区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%95%E7%A4%BA%E7%BB%84%E4%BB%B6%E5%92%8C%E5%AE%B9%E5%99%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">展示组件和容器组件的区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#React-%E4%B8%AD-keys%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-text">React 中 keys的作用是什么?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B0%83%E7%94%A8-super-props-%E7%9A%84%E7%9B%AE%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-text">调用 super(props) 的目的是什么?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#React-%E4%B8%AD-refs-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">React 中 refs 的作用是什么？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B-React-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%EF%BC%9F"><span class="toc-text">讲一下 React 的生命周期？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%A0%E4%B8%80%E8%88%AC%E5%9C%A8%E5%93%AA%E9%87%8C%E6%89%A7%E8%A1%8C%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%EF%BC%9F"><span class="toc-text">你一般在哪里执行网络请求？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E8%AE%B2%E4%BD%A0%E5%AF%B9-Hooks-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">讲讲你对 Hooks 的理解？</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#useState"><span class="toc-text">useState</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#useEffect"><span class="toc-text">useEffect</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#useContext"><span class="toc-text">useContext</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A2%9D%E5%A4%96%E7%9A%84Hooks"><span class="toc-text">额外的Hooks</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%A0%E5%AF%B9HOC-%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">你对HOC(高阶组件)的理解？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B-React-diff-%E7%9A%84%E5%8E%9F%E7%90%86"><span class="toc-text">讲一下 React diff 的原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%AF%B9-Redux-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">讲一下你对 Redux 的理解？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Redux%E7%9A%84%E5%B1%9E%E6%80%A7%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-text">Redux的属性有哪些</span></a></li></ol></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2020/10/29/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(React%20%E7%AF%87)/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2020/11/02/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Es6%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2020/10/27/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Vue%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2020/11/02/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Es6%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2020/10/27/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Vue%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>